<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="./assets/img/favicon.ico">
<link rel="icon" type="image/png" href="./assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>数据资产管理平台</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>



<!-- Main CSS -->
<link href="./assets/css/main.css" rel="stylesheet"/>

<!-- Animation CSS -->
<link href="vendor/aos.css" rel="stylesheet"/>

</head>
    <style>
		#exampleInputPassword2{
			width: 40%;
		}
		.code{
			width: 55%;
			position: absolute;
			right: 0;
			top: 0;
		}
		.err{
			font-size: 12px;
			color: rgb(246, 102, 102);
			display: block;
		}
		.success{
			display: none;
		}
	</style>
<body>




<!-- Main -->
<div class="d-md-flex h-md-100 align-items-center">
	<div class="col-md-6 p-0 bg-indigo h-md-100" style="background-image: url(./assets/img/demo/banner1.jpg);background-size: cover;">
		<div class="text-white d-md-flex align-items-center h-100 p-5 text-center justify-content-center">
			<div class="logoarea pt-5 pb-5">
				<p>
					<!-- <i class="fa fa-anchor fa-3x"></i> -->
				</p>
				<h1 class="mb-0 mt-3 display-4">数据资产管理平台</h1>

			</div>
		</div>
	</div>
	<div class="col-md-6 p-0 bg-white h-md-100 loginarea">
		<div class="d-md-flex align-items-center h-md-100 p-5 justify-content-center">
			<form class="border rounded p-5" id="form1">
				<h3 class="mb-4 text-center">忘记密码</h3>
				<div class="form-group">
					<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="E-mail" required="">
					<span></span>
				</div>
				<!-- <div class="form-group">
					<input type="text" class="form-control" id="exampleInputPassword1" placeholder="手机号" required="">
					<span></span>
				</div>
				<div class="form-group" style="position:relative;">
					<input type="text" class="form-control" id="exampleInputPassword2" placeholder="验证码" required="">
					<input type="button" class="code btn btn-success" value="获取验证码">
				</div> -->
				<div class="form-group">
					<input type="password" class="form-control" id="InputPassword" placeholder="请输入6-12位密码" required="">
					<span></span>
				</div>
				<div class="form-group">
					<input type="password" class="form-control" id="InputPassword1" placeholder="确认密码" required="">
					<span></span>
				</div>
				<!-- <div class="form-group form-check">
					<input type="checkbox" class="form-check-input" id="exampleCheck1">
					<label class="form-check-label small text-muted" for="exampleCheck1">记住我</label>
				</div> -->
				<button type="submit" class="btn btn-success btn-round btn-block shadow-sm" id="succbtn">提交</button>
				<!-- <small class="d-block mt-4 text-center"><a class="text-gray" href="#">忘记密码?</a></small> -->
			</form>
		</div>
	</div>
</div>
<!-- End Main -->




<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/popper.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
<script src="./assets/layui/layui.js" type="text/javascript"></script>
<!-- Animation -->
<script src="vendor/aos.js" type="text/javascript"></script>
<noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
</noscript>
<script>
    AOS.init({
        duration: 700
    });
</script>

<!-- Disable animation on less than 1200px, change value if you like -->
<script>
AOS.init({
  disable: function () {
    var maxWidth = 1200;
    return window.innerWidth < maxWidth;
  }
});
</script>
<script>
	$(function(){
		var minth = 60;//秒数初始值
    	var mytime;//定时函数
		$('.code').click(function(e){
			e.preventDefault();
			//文本
			mytime = setInterval(fn,1000);
			//封装一个倒计时方法
			function fn() {
				minth = --minth;
				if (minth>0){//还没有倒计时结束
					$(".code").val('('+minth+'秒)后重发').attr("disabled","disabled");
				}else{//倒计时结束
					$(".code").removeAttr("disabled");
					minth = 60;//重新初始化
					$(".code").val('重新发送');
					clearInterval(mytime);//清除定时函数
				}
			}
		})

		var regpwdn=/^[a-zA-Z0-9_]{6,12}$/  //密码
		var regtel = /^1\d{10}$/; // 手机号码
		var regemailn= /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/  //邮箱
		var tel=$('#exampleInputPassword1');
		var pwdn=$("#InputPassword");
		var emailn=$('#exampleInputEmail1');
		regexp(tel, regtel);
		regexp(pwdn, regpwdn);
		regexp(emailn, regemailn);
		// 表单验证的函数
		function regexp(ele, reg) {
			$(ele).blur(function(){
				if (!reg.test(this.value)) {
					this.nextElementSibling.className = 'err';
					this.nextElementSibling.innerHTML = '格式不正确,请重新输入';
					$('#succbtn').attr('disabled',true)

				}else{
					this.nextElementSibling.className = 'success';
					$('#succbtn').attr('disabled',false)
				}
			})
    	};
		// 密码
		$('#InputPassword1').blur(function(){
			if($(this).val()!=$("#InputPassword").val()){
				this.nextElementSibling.className = 'err';
				this.nextElementSibling.innerHTML = '两次密码输入不一致';
				$('#succbtn').attr('disabled',true)
			}else{
				this.nextElementSibling.className = 'success';
				$('#succbtn').attr('disabled',false)
			}
		})
		//提交
		$('#form1').on('submit', function (e) {
		  e.preventDefault();
		  let email = $("#InputEmail1").val();
		  let password = $("#InputPassword1").val();
		  if(email&&password){
			$.ajax({
       timeout:30000,
				type:'POST',
				url:window.Http+"/customer/resetPwd",
				data:JSON.stringify({"email":email,"password":password}),
				contentType: 'application/json;charset=utf-8',
				success:function (res){
				   if(res.code == 200){
					     layer.confirm('密码修改成功，前往登录！', {
					       btn: ['确认','取消'] //按钮
					     }, function(){
					        window.location.href = './login.html';
					     }, function(){
					       console.log("2")
					     });
				   }else{
					   layer.msg(res.msg);
				   }
				},
				error:function(err){
					layer.msg("服务器异常");
				}
			})
		  }
		})
	})
</script>
</body>
</html>
